<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/comment.css"/><!--图标-->
    <title>录播详情</title>
    <style>
        body {
            background-color: white;
        }

        .video-vod-head {
            height: 4.22rem;
            width: 7.5rem;
        }

        .video-vod-img {
            min-height: 4.22rem;
        }

        .video-vod-img img {
            width: 100%;
            height: 4.22rem;
        }

        .video-vod-bg {
            top: 0;
            left: 0;
            width: 100%;
            height: 4.22rem;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .video-vod-tab {
            border-bottom: 0.12rem solid transparent
        }

        .video-vod-tab-active {
            color: #2C68FF;
            border-bottom: 0;
        }

        .video-vod-tab-line {
            border-radius: 0.03rem;
            background-color: #2C68FF;
            width: 0.36rem;
            height: 0.06rem;
            margin-top: 0.06rem;
        }

        .video-vod-tabs-wrap {
            height: 0.88rem;
            width: 100%;
            border-bottom: 0.02rem solid rgba(0, 0, 0, 0.15);
        }

        .video-vod-tabs {
            width: 4.78rem;
        }

        .video-vod-mains {
            padding: 0.32rem 0.32rem 0.18rem 0.32rem;
        }

        .video-vod-main {
            display: none;
        }

        .video-vod-main-comment-all {
            padding: 0 0 0.36rem 0;
            color: #222222;
        }

        .video-vod-main-comment-icon {
            color: #FF9523;
            margin-right: 0.08rem;
        }

        .video-vod-main-comment-xz {
            color: rgba(34, 34, 34, 0.45);
        }

        .video-vod-main-detail-title {
            color: #222222;
        }

        .video-vod-main-detail-img {
            width: 0.44rem;
            height: 0.44rem;
        }

        .video-vod-main-detail-img img {
            width: 100%;
            height: 100%;
            border-radius: 1rem
        }

        .video-vod-main-detail-name {
            color: rgba(34, 34, 34, 0.7);
        }

        .video-vod-main-detail-icon {
            color: #B9B9B9;
        }

        .video-vod-main-detail-count {
            color: rgba(34, 34, 34, 0.45);
        }

        .video-vod-main-detail-time {
            color: rgba(34, 34, 34, 0.45);
        }

        .video-vod-main-view {
            color: rgba(34, 34, 34, 0.45);
            margin-top: 0.24rem;
        }

        .video-vod-main-content {
            margin-top: 0.66rem;
        }

        .video-vod-main-line {
            height: 0.32rem;
            width: 0.08rem;
            background-color: #FF9523;
        }

        .video-vod-main-word {
            margin-left: 0.16rem;
        }

        .video-vod-main-desc {
            /*text-align: justify;*/
            margin-top: 0.24rem;
            color: rgba(34, 34, 34, 0.7);
            line-height: 0.48rem;
        }

        .video-vod-main-video {
            margin-top: 0.64rem;
        }

        .comment-list-head {
            height: 0.6rem;
            width: 0.6rem;
        }

        .comment-list-head img {
            height: 100%;
            width: 100%;
            border-radius: 1rem;
        }

        .comment-list-user {
            color: #222222;
        }

        .comment-list-del {
            height: 0.06rem;
            width: 0.06rem;
            background-color: #999999;
            margin-left: 0.06rem;
            border-radius: 1rem;
        }

        .comment-list-content {
            color: #222222;
            padding: 0.2rem 0 0.24rem 0;
            line-height: 0.42rem;
        }

        .comment-list-reply-wrap {
            padding: 0.22rem 0.24rem;
            background-color: #F5F5F5;
        }

        .comment-list-reply-user {
            color: rgba(34, 34, 34, 0.7);
        }

        .comment-list-reply-content {
            color: #222222;
            line-height: 0.4rem;
        }

        .comment-list-reply-more {
            color: #2C68FF;
        }

        .comment-list-time {
            color: rgba(34, 34, 34, 0.45);
        }

        .comment-list-reply-icon {
            margin-left: 0.76rem;
        }

        .video-vod-main-comment-reply-more {
            color: #222222;
        }

        .comment-list-wrap {
            padding-bottom: 1rem;
        }


        /*回复*/
        .comment-more-head {
            height: 0.6rem;
            width: 0.6rem;
        }

        .comment-more-head img {
            height: 100%;
            width: 100%;
            border-radius: 1rem;
        }

        .comment-more-user {
            color: #222222;
        }

        .comment-more-del {
            height: 0.06rem;
            width: 0.06rem;
            background-color: #999999;
            margin-left: 0.06rem;
            border-radius: 1rem;
        }

        .comment-more-content {
            color: #222222;
            padding: 0.2rem 0 0.24rem 0;
            line-height: 0.42rem;
        }

        .comment-more-reply-content {
            color: rgba(34, 34, 34, 0.7);
            padding: 0.2rem 0 0.24rem 0;
            line-height: 0.44rem;
        }

        .comment-more-time {
            color: rgba(34, 34, 34, 0.45);
        }

        .comment-more-reply-icon {
            margin-left: 0.76rem;
        }

        .comment-more-input-wrap {
            height: 1.5rem;
            width: 7.5rem;
            background-color: white;
            position: fixed;
            bottom: 0;
        }

        .comment-more-input {
            margin: 0.18rem 0.32rem;
            border-radius: 0.08rem;
            background-color: #F6F6F6;
            height: 0.64rem;
            line-height: 0.64rem;
            padding-left: 0.28rem;
            color: rgba(34, 34, 34, 0.45);
        }


        /*评论须知*/
        .video-vod-comment-know-bg {
            position: fixed;
            bottom: 0;
            width: 100%;
            opacity: 0.55;
            height: 100rem;
            background-color: black;
            z-index: 5005
        }

        .video-vod-comment-know-content {
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            background-color: white;
            border-radius: 10px 10px 0 0;
            z-index: 5008;
            padding: 0.36rem;
            color: #222222;
        }

        .video-vod-comment-know-main {
            color: rgba(34, 34, 34, 0.6);
            line-height: 0.48rem
        }

    </style>
</head>
<body>

<div class="flex-column ff400 fs14 h-100-p">
    <!--头部部分-->

    <div class="placeholder-top pos-a">
        <!--状态栏-->
        <div class="status-bar pos-f"></div>
        <!--标题栏-->
        <div class="nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()" style="color: #FFFFFF;">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1"></div>
            <div class="right-bar">
            </div>
        </div>
    </div>

    <div class="video-vod-head pos-r">
        <video id="vodId" width=100% height=100% controls autoplay controlsList="nodownload" src=""></video>
        <!--<div class="video-vod-img"><img src="" alt=""></div>-->
        <!--<div class="video-vod-bg pos-a"></div>-->
    </div>


    <!-- 详情,文档,评论 -->
    <div class="video-vod-tabs-wrap flex-row justify-content-center">
        <div class="video-vod-tabs flex-row align-items-center justify-content-between">
            <div class="video-vod-tab flex-column ff500 align-items-center video-vod-tab-active" onclick="changeTab(0)">
                <div>详情</div>
                <div class="video-vod-tab-line"></div>
            </div>
            <!--<div class="video-vod-tab flex-column align-items-center" onclick="changeTab(1)">-->
            <!--    <div>文档</div>-->
            <!--</div>-->
            <div class="video-vod-tab flex-column align-items-center" onclick="changeTab(1)">
                <div>评论</div>
            </div>
        </div>
    </div>
    <!--详情、文档、评论内容-->
    <div class="video-vod-mains flex-column flex-1 scoll-y">
        <!--详情-->
        <div class="video-vod-main video-vod-main-detail" style="display: block">
            <div class="video-vod-main-detail-title fs18 ff500">隐私计算赋能金融数据共享</div>
            <div class="flex-row mt10 justify-content-between align-items-center">
                <div class="flex-row align-items-center">
                    <div class="video-vod-main-detail-img"><img src=""/></div>
                    <div class="video-vod-main-detail-name ml5"></div>
                </div>
                <div class="flex-row align-items-center">
                    <span class="video-vod-main-detail-icon iconfont iconbofangliang-01 mr5"></span>
                    <span class="video-vod-main-detail-count mr15"></span>
                    <span class="video-vod-main-detail-icon iconfont iconrili-01 mr5"></span>
                    <span class="video-vod-main-detail-time"></span>
                </div>
            </div>
            <div class="video-vod-main-view fs12">视频内容不代表智管有方观点，请您谨慎判断</div>
            <!--讲师简介-->
            <div class="video-vod-main-content flex-column">
                <div class="video-vod-desc flex-row align-items-center">
                    <div class="video-vod-main-line"></div>
                    <div class="video-vod-main-word fs16 ff500">讲师简介</div>
                </div>
                <div class="video-vod-main-desc"></div>
                <div class="video-vod-desc video-vod-main-video flex-row align-items-center">
                    <div class="video-vod-main-line"></div>
                    <div class="video-vod-main-word fs16 ff500">视频亮点</div>
                </div>
                <div class="video-vod-main-desc">
                </div>
            </div>
        </div>
        <!--文档-->
        <div class="video-vod-main">文档</div>
        <!--评论-->
        <div class="video-vod-main">
            <!--评论-->
            <div class="video-vod-main-comment video-vod-main-comment-content" style="display:block">
                <div class="video-vod-main-comment-all flex-row justify-content-between align-items-center">
                    <div class="ff500 fs16">全部评论·5</div>
                    <div class="flex-row align-items-center" onclick="commentknowShow()">
                        <span class="video-vod-main-comment-icon iconfont iconzhuyi-01 fs16"></span>
                        <span class="video-vod-main-comment-xz">评论须知</span>
                    </div>
                </div>
                <div class="comment-list-wrap">
                    <div class="comment-list-item flex-row pb30">
                        <div class="comment-list-head mr10"><img src="http://test.storage.jd.com/jtzx/d4dea7d2-d277-4e1a-9778-fb91f6f69749.jpg"/></div>
                        <div class="flex-column flex-1">
                            <div class="flex-row justify-content-between align-items-center">
                                <div class="comment-list-user fs13 ff500">手机用户</div>
                                <div class="flex-row">
                                    <div class="comment-list-del"></div>
                                    <div class="comment-list-del"></div>
                                    <div class="comment-list-del"></div>
                                </div>
                            </div>
                            <div class="comment-list-content fs15">内容内容撒娇哦i是建瓯市骄傲</div>

                            <!--评论回复-->
                            <div class="comment-list-reply-wrap mb10 flex-column">
                                <div class="flex-row mb10">
                                    <div class="fs13">
                                        <span class="comment-list-reply-user">手机用户：</span>
                                        <span class="comment-list-reply-content">义了多根轴线的对义了多根轴线的对齐方式义了多根轴线的对齐方式义了多根轴线的对齐方式齐方式</span>
                                    </div>
                                </div>
                                <div class="flex-row mb10">
                                    <div class="fs13">
                                        <span class="comment-list-reply-user">手机用户：</span>
                                        <span class="comment-list-reply-content">义了多根轴线的对义了多根轴线的对齐方式义了多根轴线的对齐方式义了多根轴线的对齐方式齐方式</span>
                                    </div>
                                </div>
                                <div class="comment-list-reply-more fs13" onclick="moreComment()">查看更多回复</div>
                            </div>
                            <!--评论时间及回复点赞-->
                            <div class="flex-row justify-content-between align-items-center fs12">
                                <div class="comment-list-time">52分钟前</div>
                                <div class="flex-row align-items-center">
                                    <span class="iconfont icondianzan fs16"></span>
                                    <span class="ml5">12</span>
                                    <span class="comment-list-reply-icon iconfont iconpinglun fs16"></span>
                                </div>
                            </div>

                        </div>
                    </div>


                </div>
            </div>

            <!--更多回复-->
            <div class="video-vod-main-comment video-vod-main-comment-more" style="display:none">
                <div class="video-vod-main-comment-reply-more flex-row justify-content-between align-items-center">
                    <div class="ff500 fs16">更多回复</div>
                    <div class="flex-row align-items-center" onclick="commentShow()">
                        <span class="iconfont iconguanbi fs18"></span>
                    </div>
                </div>
                <div class="comment-more-reply-wrap">
                    <div class="comment-more-reply-item flex-row pt30">
                        <div class="comment-more-head mr10"><img src="http://test.storage.jd.com/jtzx/d4dea7d2-d277-4e1a-9778-fb91f6f69749.jpg"/></div>
                        <div class="flex-column flex-1">
                            <div class="flex-row justify-content-between align-items-center">
                                <div class="comment-more-user fs13 ff500">手机用户</div>
                                <div class="flex-row">
                                    <div class="comment-more-del"></div>
                                    <div class="comment-more-del"></div>
                                    <div class="comment-more-del"></div>
                                </div>
                            </div>
                            <div class="comment-more-reply-content fs14">我是回复</div>

                            <!--评论时间及回复点赞-->
                            <div class="flex-row justify-content-between align-items-center fs12">
                                <div class="comment-more-time">52分钟前</div>
                                <div class="flex-row align-items-center">
                                    <span class="iconfont icondianzan fs16"></span>
                                    <span class="ml5">12</span>
                                    <span class="comment-more-reply-icon iconfont iconpinglun fs16"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="comment-more-reply-item flex-row pt30">
                        <div class="comment-more-head mr10"><img src="http://test.storage.jd.com/jtzx/d4dea7d2-d277-4e1a-9778-fb91f6f69749.jpg"/></div>
                        <div class="flex-column flex-1">
                            <div class="flex-row justify-content-between align-items-center">
                                <div class="comment-more-user fs13 ff500">手机用户</div>
                                <div class="flex-row">
                                    <div class="comment-more-del"></div>
                                    <div class="comment-more-del"></div>
                                    <div class="comment-more-del"></div>
                                </div>
                            </div>
                            <div class="comment-more-reply-content fs14">我是回复</div>

                            <!--评论时间及回复点赞-->
                            <div class="flex-row justify-content-between align-items-center fs12">
                                <div class="comment-more-time">52分钟前</div>
                                <div class="flex-row align-items-center">
                                    <span class="iconfont icondianzan fs16"></span>
                                    <span class="ml5">12</span>
                                    <span class="comment-more-reply-icon iconfont iconpinglun fs16"></span>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="comment-more-reply-item flex-row pt30">
                        <div class="comment-more-head mr10"><img src="http://test.storage.jd.com/jtzx/d4dea7d2-d277-4e1a-9778-fb91f6f69749.jpg"/></div>
                        <div class="flex-column flex-1">
                            <div class="flex-row justify-content-between align-items-center">
                                <div class="comment-more-user fs13 ff500">手机用户</div>
                                <div class="flex-row">
                                    <div class="comment-more-del"></div>
                                    <div class="comment-more-del"></div>
                                    <div class="comment-more-del"></div>
                                </div>
                            </div>
                            <div class="comment-more-reply-content fs14"><span style="color: #2C68FF;">回复</span>土豆：内容内容哦内容内容哦市骄傲是建瓯市骄是市骄傲是建瓯市骄建瓯市骄傲是建瓯市骄傲</div>

                            <!--评论时间及回复点赞-->
                            <div class="flex-row justify-content-between align-items-center fs12">
                                <div class="comment-more-time">52分钟前</div>
                                <div class="flex-row align-items-center">
                                    <span class="iconfont icondianzan fs16"></span>
                                    <span class="ml5">12</span>
                                    <span class="comment-more-reply-icon iconfont iconpinglun fs16"></span>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
    <div class="comment-area">
    </div>

</div>
<!--评论须知-->
<!--评论须知背景框-->
<div class=" video-vod-comment-know-bg video-vod-comment-know" style="display: none" onclick="commentknowClose()"></div>
<!--评论须知内容-->
<div class="video-vod-comment-know-content video-vod-comment-know" style="display: none">
    <div class="flex-row justify-content-end">
        <span class="fs17 iconfont iconguanbi" onclick="commentknowClose()"></span>
    </div>
    <div class="fs18 mt5">一、评论须知</div>
    <div class="video-vod-comment-know-main mt10">
        <div>1、为规范互联网论坛社区服务，促进JT2平台多方评论持续、健康、有序地发展，保护JT2用户的合法权益，特制定本规范。</div>
        <div>2、用户在使用多方评论服务之前，应当仔细阅读本规范，并同意遵守本协议及所有规则后方可成为多方评论用户。</div>
    </div>
    <div class="mt30 fs18">二、规范内容</div>
    <div class="mt10">用户对其自行发表、上传或传送的内容负全部责任，所有用户不得在多方评论页面发布、转载、传送含有下列内容之一的信息，否则JT2有权自行处理并不通知用户:</div>
    <div class="video-vod-comment-know-main mt10">
        <div>1、严禁在社区内散播或制造任何与事实不符的言论。您的任何不良言论都将可能给第三方造成恶劣影响，请理解配合。</div>
        <div>2、严禁因观点不同或讨论立场有异在版块上发表针对他人的嘲笑、讽刺、漫骂等人身攻击言论，希望您雅量和谐、理性讨论。</div>
    </div>

</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>

<script>
  let pm = {
    isScroll: false,
    pageNum: 1,
    pageSize: 1,
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    pm.infoId = params.infoId
    getTrainingInfoByInfoId()
    $('.comment-area').html(Template.commentDetail(1, 1, 0, 1))

  }

  function changeTab(num) {
    $('.video-vod-tabs .video-vod-tab').removeClass('video-vod-tab-active ff500')
    $('.video-vod-tabs .video-vod-tab .video-vod-tab-line').remove()
    $('.video-vod-tabs .video-vod-tab').eq(num).addClass('video-vod-tab-active ff500')
    $('.video-vod-tabs .video-vod-tab').eq(num).append('<div class=\'video-vod-tab-line\'></div>')
    $('.video-vod-mains .video-vod-main').hide()
    $('.video-vod-mains .video-vod-main').eq(num).show()
  }


  //获取录播详情
  function getTrainingInfoByInfoId() {
    Server.videoVod.getTrainingInfoByInfoId({
      infoId: pm.infoId,
      pageNum: pm.pageNum,
      pageSize: pm.pageSize
    }).then(function (data) {

      $('video').attr('src', data.trainingInfo.videoUrl)
  
      $('.video-vod-img img').attr('src', data.trainingInfo.coverImgUrl)
      $('.video-vod-main-detail-title').html(Utils.dealUndefined(data.trainingInfo.mainTitle))
      $('.video-vod-main-detail-img img').attr('src', data.trainingInfo.lecturerHead)
      $('.video-vod-main-detail-name').html(data.trainingInfo.lecturer)
      $('.video-vod-main-detail-count').html(data.trainingInfo.readCnt)
      $('.video-vod-main-detail-time').html(data.trainingInfo.issuerDttmStr.substring(0, 10))

      if (data.trainingInfo.lecturerIntroduction) {
        $('.video-vod-main-desc').eq(0).html(data.trainingInfo.lecturerIntroduction)
      } else {
        $('.video-vod-desc').eq(0).hide()
      }
      if (data.trainingInfo.courseIntroduction) {
        $('.video-vod-main-desc').eq(1).html(data.trainingInfo.courseIntroduction)
      } else {
        $('.video-vod-desc').eq(1).hide()
      }
    })
  }


  function showInput(v) {
    if (v === 0) {//取消发布
      $('.comment-show').hide()
    } else if (v === 1) { //发布评论
      if (Utils.emojiJudge($('.comment-content').val())){
        // 不允许输入表情
        jsBridge.callBridge('toast', {msg: '请勿输入表情'})
        return
      }else if ($('.comment-content').val() && $('.comment-content').val().trim()) {//如果有内容，则添加评论
        showInput(0)
      } else {//弹出内容不能为空
        jsBridge.callBridge('toast', {msg: '评论不能为空'})
      }
    }
  }

  function writeComment() {
    $('.comment-show').show()
    $('.comment-content').focus()
  }

  //显示评论页面
  function commentShow() {
    $('.video-vod-main-comment-content').show()
    $('.video-vod-main-comment-more').hide()
  }

  // 显示更多回复
  function moreComment() {
    $('.video-vod-main-comment-content').hide()
    $('.video-vod-main-comment-more').show()
  }

  function commentknowShow() {
    $('.video-vod-comment-know').show()
  }

  //评论须知
  function commentknowClose() {
    $('.video-vod-comment-know').hide()
  }

</script>
</html>
